<template>
    <div class="control-wrapper">
        <div class="control-mask" :style="'background-image: url('+mask+'?imageView&thumbnail=414y736&quality=75&tostatic=0)'"></div>
        <div class="control-mask"></div>

        <header class="control-header">
            <div class="icon-back header-left">
                <div @click="$router.go(-1)">←</div>
            </div>
            <div class="control-header-text">
                <p class="song-text">{{songName}}</p>
                <span class="singer-text">{{singer}}</span>
            </div>
            <div class="header-right">
                分享
            </div>
        </header>
        <div class="control-cover-wrapper" @click.stop="showCover = !showCover">
            
            <div class="control-cover" v-show="showCover">
                <img  :src="imgCover + '?imageView&thumbnail=360y360&quality=75&tostatic=0'" alt=" " :class="playState ? 'play' : 'pause'" @click.stop="togglePlayState" />
            </div>

            <lyric-wrapper :data="lyricData" v-model="ct" v-show="!showCover"> </lyric-wrapper>

        </div>
        <div class="control-toolbar">
            <v-icon v-for="(item,i) in toolbar" :key="item"
                @click="triggerToolbar(i)"
            >
               {{'mdi-' + item}}
            </v-icon>
        </div>
        <!-- <ul>
            <li v-for="(item,i) in playList" :key="i">
                {{  item.name}}
            </li>
        </ul> -->
        <div class="control-progress-bar">
            <MusicProgress 
                :audio="audio" 
                :playid='playId'
                @change="getCurrentTime"
                @start="pauseMusic"
                @end="playMusic"
                @ended="musicEnded"
            />
        </div>
        <div class="control-core">
                <v-icon @click="togglePlayMode">
                    {{ 'mdi-' + playMode}}
                </v-icon>

                <v-icon class="control-skip-icon"
                    @click="prevMusic"
                >
                    mdi-skip-previous
                </v-icon>

                <v-icon class="control-play-icon"
                    @click.stop="togglePlayState"
                >
                     {{playState ? 'mdi-pause-circle-outline' : 'mdi-play-circle-outline'}}
                </v-icon>

                <v-icon class="control-skip-icon"
                    @click="nextMusic"
                >
                    mdi-skip-next
                </v-icon>

                <v-icon
                    @click.stop="toggleShowPlayList"
                >
                    
                    mdi-playlist-music
                </v-icon>
            
        </div>

        <v-bottom-sheet v-model="subShow">
            <v-sheet height="240">
                 <div style="padding: 0 10px;">
                     <v-slider
                        :prepend-icon="muted"
                        @click:append="toggleVolumeMuted"
                        max="100"
                        min="0"
                        dense
                        v-model="volume"
                        thumb-label
                        :disabled="muted === 'mdi-volume-mute'"
                    ></v-slider>
                 </div>
            </v-sheet>
        </v-bottom-sheet>

        <v-bottom-sheet v-model="showPlayList">
            <v-sheet height="320">
                 <div style="padding: 10px 0;">
                     <song-cell class="overflow-y-auto" style="height: 320px;" :data="playList" detail ></song-cell>
                 </div>
            </v-sheet>
        </v-bottom-sheet>
    </div>
</template>

<script>
import {musicMixin} from '@/utils/mixin'
import MusicProgress from '@/components/control/progress.vue'
import LyricWrapper from '../components/control/lyricWrapper.vue'
import api from '@/api/index'
import SongCell from '../components/songCell/songCell.vue'

export default {
    mixins: [musicMixin],
    components: {
        MusicProgress,
        LyricWrapper,
        SongCell
    },
    computed: {
        mask(){
            return this.playInfo ? this.playInfo.al.picUrl : '';
        },
        muted(){
            return this.audio.muted ? 'mdi-volume-mute' : 'mdi-volume-high';
        }
    },

    watch: {
       playId: {
           handler(n){
                console.log('listen audio play id change .')
                api.getLyric(n).then(res => {
                    this.lyricData = res.data.lrc.lyric;
                })   
           },
           immediate: true
       }
    },

    data(){
        return {
            subShow: false,
            showCover: true,
            showPlayList: false,
            lyricData: null,
            ct: 0,
            toolbar: ['account-heart', 'comment', 'dots-vertical'],
            playModeList : [ 'repeat', 'repeat-once', 'shuffle', 'view-headline']
        }
    },

    methods: {
       triggerToolbar(i){
           if(i === this.toolbar.length - 1){
               // 
                this.subShow = true;
           }
       },

       toggleShowPlayList(){
           this.showPlayList = !this.showPlayList
       },

       toggleVolumeMuted(){
           if(this.audio.muted){
               delete this.audio.muted;
           }else{
               this.audio.muted = true;
           }
       },
       togglePlayMode(){
           let index = this.playModeList.findIndex( i => i === this.playMode);

           index = index === 3 ? 0 : ++index;

           let mode = this.playModeList[index];

           

            this.setPlayMode(mode);

           
       },
    
       getCurrentTime(n){
           this.ct = isNaN(Number(n)) ? 0 : Number(n) ;
       },

       musicEnded(evt){
           if(this.playMode){
               let _this = this;
               let mode = this.playMode;
                if(this.audio.loop){
                    delete this.audio.loop;
                }

                console.log(mode);

                switch(mode) {
                    case 'repeat':
                        repeatMode();
                        break;
                    case 'repeat-once':
                        repeatOnce();
                        break;
                    case 'shuffle' :
                        shuffle();
                        break;
                    case 'view-headline':
                        listMode();
                        break;
                }

                function repeatMode(){
                    let index = _this.playIndex;
                    let len = _this.playList.length;
                    _this.pauseMusic();
                    _this.setPlayInfo( index <= len-2 ? _this.playList[++index].id : _this.playList[0].id).then(res => {
                        console.log(index);
                        _this.setPlayIndex(index);
                        _this.playMusic()
                    })
                }

                function repeatOnce(){
                    _this.audio.loop = true;
                }

                function shuffle(){
                    let range = _this.playList.length;

                    let random = Math.floor(Math.random()*range);

                     _this.pauseMusic();
                    _this.setPlayInfo(_this.playList[random].id).then(res => {
                        _this.playMusic();

                    })
                }

                function listMode(){
                    let index = _this.playIndex;
                    let len = _this.playList.length;
                    _this.pauseMusic();
                    if(index < len -1){
                        _this.setPlayInfo( _this.playList[++index].id ).then(res => {
                            _this.setPlayIndex(index);
                            _this.playMusic()
                        })
                    }
                }
           }
       }
    }        
}
</script>

<style lang="scss" scoped>
     @import '@/assets/styles/global';

     .control-wrapper {
         position: relative;
         height: 100%;
         color: #fff;
         .control-mask {    
             @include absCenter;
             background-color: rgba(0,0,0,.4);
             background-size: 200%;
             background-repeat: no-repeat;
             background-position: center;
             filter: blur(20px);
             z-index: -1;
         }

         .control-header {
             height: px2rem(40);
             @include spaceBetween;
             .header-left {
                 width: px2rem(60);
                 flex-shrink: 0;
             }
             .control-header-text {
                flex: 1;
                width: 0;
                padding-top: px2rem(6);
                .song-text {
                   font-size: px2rem(14);
                   @include ellipsis;
                }
                .singer-text {
                    @include defaultFontSize;
                    color: #eaeaea;
                }
             }
             .header-right {
                 width: px2rem(60);
                 flex-shrink: 0;
             }
             
         }

         .control-cover-wrapper {
             margin-top: px2rem(60);
             position: relative;
             height: px2rem(320);
             overflow-y: hidden;
             .control-cover {
                 width: px2rem(200);
                 height: px2rem(200);
                 margin: 0 auto;
                 border-radius: 50%;
                 overflow: hidden;
                 border: px2rem(10) solid #333;
                 box-sizing: border-box;
                 img {
                     width: 100%;
                     height: 100%;
                     border-radius: 50%;
                     animation: rotateCover 10s linear infinite;
                     &.pause {
                        animation-play-state: paused;
                     }

                     &.play {
                        animation-play-state: running;
                     }
                 }
             }
         }

         .control-toolbar {
             display: flex;
             height: px2rem(48);
             align-items: center;
             justify-content: space-between;
             padding: 0 px2rem(16);

             .v-icon {
                 color: #fff;
             }

             span {
                 display: block;
                 width: px2rem(32);
                 height: px2rem(32);
                 text-align: center;
                 line-height: px2rem(32);
                 color: #fff;
                 background-color: rgb(231, 127, 127);
                 border-radius: 40%;
             }
         }
        
        .control-core {
            position: absolute;
            height: px2rem(100);
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 px2rem(16);
            box-sizing: border-box;

            * {
                display: block;
                text-align: center;
                color: #f1f1f2;
                
            }

            .control-play-icon {
                font-size: px2rem(60);
            }

            .control-skip-icon {
                font-size: px2rem(40);
            }
        }

     }
</style>